<template>
    <div class="content">
        <div class="form-list">
            <u--form
                ref="uForm"
                labelPosition="left"
                labelWidth="160rpx"
                :model="form"
                :rules="rules"
            >
                <u-form-item label="预约人" prop="name" required borderBottom>
                    <u--input v-model="form.name" border="none" placeholder="请输入姓名"></u--input>
                </u-form-item>
                <u-form-item label="联系电话" prop="mobile" required borderBottom>
                    <u--input
                        v-model="form.mobile"
                        border="none"
                        maxlength="11"
                        placeholder="请输入联系电话"
                    ></u--input>
                </u-form-item>
                <u-form-item
                    label="访问日期"
                    prop="date"
                    required
                    borderBottom
                    @click="isShowTimePicker = true"
                >
                    <u--input
                        v-model="form.date"
                        readonly
                        border="none"
                        placeholder="请选择访问日期"
                    ></u--input>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
                <div class="border"></div>
                <u-form-item
                    label="访问事由"
                    prop="remarks"
                    required
                    borderBottom
                    labelPosition="top"
                >
                    <u--textarea
                        v-model="form.remarks"
                        readonly
                        border="none"
                        placeholder="请输入访问事由"
                    ></u--textarea>
                </u-form-item>
            </u--form>
        </div>

        <u-datetime-picker
            :show="isShowTimePicker"
            v-model="form.visitDate"
            mode="date"
            :min-date="currentDate"
            close-on-click-overlay
            @close="isShowTimePicker = false"
            @cancel="isShowTimePicker = false"
            @confirm="onTimeConfirm"
        ></u-datetime-picker>

        <div class="footer-bar">
            <u-button
                color="#5428EC"
                text="提交"
                :customStyle="{ width: '100%', margin: 0 }"
                @click="submit"
            ></u-button>
        </div>
    </div>
</template>

<script>
import dayjs from 'dayjs';
export default {
    name: 'list',
    data() {
        return {
            id: null,
            currentDate: Number(new Date()),
            form: {
                name: null,
                mobile: null,
                date: null,
                visitDate: null,
                remarks: null,
            },
            rules: {
                name: {
                    type: 'string',
                    required: true,
                    message: '请输入姓名',
                    trigger: ['blur', 'change'],
                },
                mobile: [
                    {
                        type: 'string',
                        min: 11,
                        required: true,
                        message: '请输入正确的电话号码',
                        trigger: ['blur', 'change'],
                    },
                    {
                        validator: (rule, value) => {
                            return uni.$u.test.mobile(value);
                        },
                        message: '请输入正确的电话号码',
                        trigger: ['blur', 'change'],
                    },
                ],
                date: {
                    type: 'string',
                    required: true,
                    message: '请选择访问日期',
                    trigger: ['blur', 'change'],
                },
                remarks: {
                    type: 'string',
                    required: true,
                    message: '请输入访问事由',
                    trigger: ['blur', 'change'],
                },
            },
            isShowTimePicker: false,
        };
    },
    onLoad(options) {
        this.id = Number(options.id);
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules);
    },
    methods: {
        onTimeConfirm() {
            this.isShowTimePicker = false;
            setTimeout(() => {
                this.$set(this.form, 'date', dayjs(this.form.visitDate).format('YYYY-MM-DD'));
            }, 500);
        },
        async submit() {
            const validate = await this.$refs.uForm.validate();
            if (validate) {
                this.$Api.study.visitor
                    .create({
                        ...this.form,
                        studyhallId: this.id,
                    })
                    .then(() => {
                        uni.navigateTo({
                            url: '/pages/book/success',
                        });
                    });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    width: 100%;
    .border {
        width: 100%;
        height: 20rpx;
        background: #f6f6f6;
    }
    .footer-bar {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        padding: 20rpx;
        background: #fff;
        box-sizing: border-box;
    }
}
::v-deep .u-form {
    .u-form-item {
        background: #fff;
        padding: 0 40rpx;
    }
}
</style>
